<template>
  <div class="white-module info">
    <div class="c">
      <div class="user">
        <div class="item"><span>参赛代表队</span>{{teaminfo.team_name}}</div>
        <div class="item"><span>领队</span>{{teaminfo.real_name}}</div>
      </div>
      <div class="user">
        <div class="item"><span>参赛选手姓名</span>{{userName}}</div>
      </div>
    </div>
  </div>
  <div class="white-module st">
    <el-row class="search-module">
      <el-col class="search-left" :span="20">
       <div class="item"> <span class="text">赛事层级</span><el-select style="width:285px" placeholder="请选择" v-model="dataForm.matchLevel" >
         <el-option
             v-for="itemO in matchList"
             :key="itemO.code"
             :label="itemO.name"
             :value="itemO.code">
         </el-option>

       </el-select></div>
        <div class="item">
          <span class="text">赛事地区</span><el-select style="width:285px" placeholder="请选择" v-model="dataForm.province"  @change="selectCity">
          <el-option value="" label="全国">全国</el-option>
          <el-option
              v-for="itemO in area.item"
              :key="itemO.code"
              :label="itemO.name"
              :value="itemO.code">
          </el-option>

        </el-select> </div>
        <div class="item">
          <span class="text">赛事城市</span><el-select style="width:285px" placeholder="请选择" v-model="dataForm.city" >
          <el-option value="" label="全部">全部</el-option>
          <el-option
              v-for="itemO in areaCity.item"
              :key="itemO.code"
              :label="itemO.name"
              :value="itemO.code">
          </el-option>

        </el-select> </div>
        <div>

          <span  class="text">赛事时间</span>
          <el-date-picker
              v-model="dataForm.beginDate"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
          <span style="padding:0px 2px 0px 10px">-</span>
          <el-date-picker
              v-model="dataForm.endDate"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col class="right-btn" :span="4">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="default" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row class="global-pagination">
      <div class="total">共{{total}}条数据</div>
      <!--    <el-col :span="8" class="total"> 共搜索 {{total}} 条数据 </el-col>-->
      <el-col :span="16">
        <el-pagination
            background
            layout="  prev, pager, next, jumper"
            :total="total"
            :page-size="10"
            :current-page="page"
            :small="false"
            :disabled="false"
            @size-change="query"
            @current-change="pageCurrentChangeHandle"
        />
      </el-col>
    </el-row>
    <div v-for="(item,index) in dataList">
      <div class="contest-title">
        {{item.match_name}} <span>{{item.begindate}}</span> <el-button type="text" @click="toTicket(item.detail)">查看参赛证</el-button>
      </div>
      <div class="global-table">
        <el-table
            :data="item.detail"
            :header-cell-style="{
            background: '#F5F7FA',
            color: '#333',
          }"
            style="width: 100%"
        >
          <el-table-column prop="item_name" label="赛项" >
            <template #default="scope">
              {{scope.row.item_name}}({{scope.row.group_name}})
            </template>
          </el-table-column>
          <el-table-column prop="create_date" label="报名时间" />
          <el-table-column  label="状态" >
            <template #default="scope">
              <span class="yellow" v-if="scope.row.status  == 0">审核中</span>
              <span class="green" v-if="scope.row.status  == 1">报名成功</span>
              <span class="black" v-if="scope.row.status  == 2">完赛</span>
              <span class="red" v-if="scope.row.status  == 3">已取消/弃权</span>
              <span class="yellow" v-if="scope.row.status == 4">比赛中</span>
              <span class="yellow" v-if="scope.row.status  == 5">已获晋级资格</span>
              <span class="green" v-if="scope.row.status == 6">晋级成功</span>
              <span class="yellow" v-if="scope.row.status == 7">弃权</span>
              <span class="red" v-if="scope.row.status == 8">驳回</span>
              <span class="yellow" v-if="scope.row.status == 9">待确认</span>
              <span class="grey" v-if="scope.row.status == 10">报名未成功</span>
            </template>
          </el-table-column>

          <el-table-column prop="student" label="参赛信息" >
            <template #default="scope">
              <span  class="table-text-btn"  @click="handleQuery(scope.row.id)"  > 查看 </span>
            </template>
          </el-table-column>
          <el-table-column prop="student"  label="成绩" >
            <template #default="scope">
              <span  class="table-text-btn"  @click="scoreQuery(scope.row.id)"> 查看 </span>
            </template>
          </el-table-column>
          <el-table-column prop="student" label="获奖证书" >
            <template #default="scope">
              <span class="table-text-btn" v-if="scope.row.certificate_url" @click="handleEncourage(scope.row.certificate_url)"> 查看 </span>
              <span class="table-text-btn" v-if="scope.row.certificate_url" @click="downLoadFile(scope.row.certificate_url, userName + '.png')">下载</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

  </div>

</template>
<script lang="ts" >

import {defineComponent, reactive, ref, toRefs} from "vue";
import listService from "@/utils/listService";
import router from "@/router";
import baseService from "@/utils/baseService";
import {getCache} from "@/utils/cache";
import app from "@/constants/app";
import {ElMessage} from "element-plus";

export default defineComponent({

  mounted() {
    //debugger
    const _id = getCache('CacheToken', { isSessionStorage: true }, {})['id'];
    const _realName = getCache('CacheToken', { isSessionStorage: true }, {})['realName'];
    console.log(_id)
    console.log(_realName)
    this.dataForm.userId=''+(this.$route.query.userId ? this.$route.query.userId : _id);
    console.log(this.dataForm.userId)
    this.query();
    baseService.areaList(this.area);
    const teamId =getCache("CacheToken",{ isSessionStorage: true }, {})["teamId"];
    this.queryTeamInfo(teamId);
    this.userName = ''+(this.$route.query.userName ? this.$route.query.userName : _realName);
    console.log(this.userName)
  },
  setup() {
    const state = reactive({
      getDataListURL: "/front/fast/match/matchRecord/page?pageSize=10",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      createdIsNeed:false,
      dataForm: {
        userId:'',
        city:'',
        season:'',
        matchLevel:'',
        province:'',
        beginDate:'',
        endDate:'',
        searchStr:''
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  data() {
    return {
      userName:'',
      teaminfo:{
        real_name: "",
        team_name: ""
      },
      dataList:[{},{},{},{}],
      sessionList:[{name:"2023",code:"2023"},{name:"2024",code:"2024"},{name:"2025",code:"2025"}],
      matchList:[{name:"国赛",code:"1"},{name:"省赛",code:"2"},{name:"市赛",code:"3"}],
      matchArea:[{name:"上海",code:"1"},{name:"青岛",code:"2"},{name:"济南",code:"3"}],
      areaCity:{code:'0',item:[]},
      area:{code:'0',item:[]},
      dates:null,
      dates1:null,
      dialogVisible:false,
      isCollapse:1,
      isNavCollapse:false,
      showDialogFlag: false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      },tableData : [
        {
          no: "111",
          name: "学校A",
          course: "10",
          teacher: "10",
          student: "10"
        },
      ],
      formLabelWidth: '120px',
    };
  },

  methods: {
    queryTeamInfo(id: any) {
      baseService.get("/front/fast/user/team/info?id=" + id).then((e: any) => {
        if (e.code == '0') {
          this.teaminfo = e.data;
        }
      });
    }
    ,
    selectCity() {
      if (this.dataForm.province) {
        this.areaCity.code = this.dataForm.province;
        baseService.areaList(this.areaCity);
      } else {
        this.areaCity.item = [];
      }

    },
    handleInfo(id: any) {
      router.push("/enroll/enrollInfo?id=" + id);
    }, handlePromotion() {
      router.push("/enroll/promotion");
    }, reset: function () {
      if (this.dataForm) {
        this.dataForm = {
          userId: this.dataForm.userId,
          season: '',
          matchLevel: '',
          city: '',
          province: '',
          beginDate: '',
          endDate: '',
          searchStr: ''
        };

      }
    }, handleQuery(id: any) {
      router.push("/contestInfo?id=" + id + "&userId=" + this.dataForm.userId);
    },

    handleEncourage(url: string) {
      window.open(url);
    },

    scoreQuery(id: any){
      router.push("/enroll/enrollInfo?id=" + id);
    },

    toTicket(detail: any) {
      if(detail && detail.length>0){
        let url = detail[0].ticket_url;
        if(url){
          let urls = url.split("、");
          window.open(urls[0]);
        }else{
          ElMessage.error("无参赛证");
        }

      }
    },

    downLoadFile(url: string, name: string){
      let a = document.createElement('a');
      let evt = document.createEvent('MouseEvents');
      a.download = '晋级列表';
      a.href = app.api+"/front/download?imageUrl="+ url +"&fileName=" + name;
      evt.initEvent('click',true,true);
      a.dispatchEvent(evt);
      window.URL.revokeObjectURL(a.href);
    }

  }
});
</script>
<style lang="scss" scoped>

.global-table {
  margin-bottom: 34px;

  span.red {
    color: #FC5260;
  }

  span.red1 {
    color: red;
  }

  span.blue {
    color: #00B7B3;
  }

  span.green {
    color: forestgreen;
  }

  span.black {
    color: #4F5A70;
  }

  span.yellow {
    color: #FF8F3C;
  }

  span.grey {
    color: #959ca9;
  }

}
.info {
  padding: 20px;
  margin-bottom: 16px;

  .c {
    border-radius: 6px;
    padding: 13px 16px;

    position: relative;

    &::after {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 3;
      ;
      border-radius: 6px;
      content: "";
      opacity: 0.08;
      background: linear-gradient(82deg, #24b3f4 0%, #6582ff 100%);
    }

    .user {
      display: flex;
      align-items: center;

      .item {
        display: flex;
        align-items: center;
        margin-right: 40px;

        span {
          font-size: 16px;
          font-weight: $font-weight-bold;
          margin-right: 16px;
        }
      }
    }

    .user:last-child {
      margin-top: 10px;
    }
  }
}

.st {
  padding: 20px;

  .search-module {
    margin-bottom: 12px;
  }

  .contest-title {
    display: flex;
    align-items: center;
    font-weight: $font-weight-bold;
    margin-bottom: 10px;
    margin-top: 28px;

    span {
      padding: 0px 30px;
    }
  }
}</style>
